<template>
  <div class="firstStorage">
    <div class="imgs">
      <div class="logo">
        <imgt src="/imgs/myDiscounts/firstStorageLogo.webp" />
      </div>
      <div class="text">
        <imgt src="/imgs/myDiscounts/firstStorageText.webp" />
      </div>
    </div>

    <div class="content-box">
      <div class="title">{{ t('first_deposit_tips') }}</div>
      <div class="content">
        <div class="signIn">
          <div :class="['day', firstRechargeInfo.process[index] === 1 ? '' : 'day-bg']"
            v-for="(item, index) in signIn_7.data" :key="index">
            <div class="now_get" @click="tipsModal(index + 1)">
              <p>{{ item.name }}</p>
              <Imgt class="question" src="/imgs/myDiscounts/question_icon.webp" alt="" />
            </div>
            <div class="day_content">
              <div class="information">
                <div>
                  <p class="percent">{{ item.percent }}%</p>
                  <Imgt class="gift" :src="item.src" :key="item.src" alt="" />
                  <div class="water_money" v-if="item.waterNum !== undefined">
                    <nut-circle-progress type="circle" style="width: 34px;height: 34px;font-size: 10px;color: #fff"
                      :progress="item.waterNum" :stroke-width="10" color="rgba(53, 208, 60, 1)" />
                  </div>
                </div>
                <nut-button :disabled="firstRechargeInfo.process[index] !== 1" :bordered="false"
                  :class="['weal', firstRechargeInfo.process[index] === 1 ? 'weal-bg' : '']"
                  @click="getAward(item, firstRechargeInfo.process[index] === 1)">{{ t('first_deposit_receive')
                  }}</nut-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="close" @click="close">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
        <circle cx="15" cy="15" r="14.375" fill="#D9D9D9" fill-opacity="0.2" stroke="white" stroke-width="1.25" />
        <path
          d="M19.9029 8.68986C20.2564 8.33637 20.8295 8.33637 21.183 8.68986C21.5365 9.04335 21.5365 9.61647 21.183 9.96997L10.0888 21.0642C9.73527 21.4177 9.16215 21.4177 8.80865 21.0642C8.45516 20.7107 8.45516 20.1376 8.80865 19.7841L19.9029 8.68986Z"
          fill="white" />
        <path
          d="M8.80802 9.96916C8.45453 9.61566 8.45453 9.04254 8.80802 8.68905C9.16151 8.33556 9.73464 8.33556 10.0881 8.68905L21.1824 19.7833C21.5359 20.1368 21.5359 20.7099 21.1824 21.0634C20.8289 21.4169 20.2558 21.4169 19.9023 21.0634L8.80802 9.96916Z"
          fill="white" />
      </svg>

    </div>
    <Modal v-model:visible="isShow" :title="t('tip')">
      <div class="popup_body">
        <div class="info">{{ contentText }}</div>

        <div class="submit_btn">
          <nut-button @click="isShow = false" class="btn">{{ t('confirm') }}</nut-button>

        </div>
      </div>
    </Modal>
  </div>
</template>

<script setup lang="ts">
import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from '@/netBase/NetPacket';
import { onBeforeMount, reactive, ref, defineAsyncComponent } from "vue";
import { useI18n } from "vue-i18n";
import { showNotify } from "@nutui/nutui";

const Imgt = defineAsyncComponent(() => import("@/components/Imgt.vue"));
const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
const { t } = useI18n();
const model = defineModel()
const signIn_7: any = reactive({
  data: [
    { name: t('first_deposit_sign_in_1'), percent: 5, src: '/imgs/myDiscounts/firstDeposit_1.webp' },
    { name: t('first_deposit_sign_in_2'), percent: 10, src: '/imgs/myDiscounts/firstDeposit_2.webp' },
    { name: t('first_deposit_sign_in_3'), percent: 15, src: '/imgs/myDiscounts/firstDeposit_3.webp' },
    { name: t('first_deposit_sign_in_4'), percent: 30, src: '/imgs/myDiscounts/firstDeposit_last.webp', water: true, waterNum: 0 },
    { name: t('first_deposit_sign_in_5'), percent: 60, src: '/imgs/myDiscounts/firstDeposit_last.webp', water: true, waterNum: 40 },
    { name: t('first_deposit_sign_in_6'), percent: 80, src: '/imgs/myDiscounts/firstDeposit_last.webp', water: true, waterNum: 100 },
  ]
})

const isShow = ref(false)
const contentText = ref('')

const tipsModal = (id: number) => {

  if (id === 1) {
    contentText.value = t('free_loot_day1')
  }
  if (id === 2) {
    contentText.value = t('free_loot_day2')
  }
  if (id === 3) {
    contentText.value = t('free_loot_day3')
  }
  if (id === 4) {
    contentText.value = t('free_loot_day4')
  }
  if (id === 5) {
    contentText.value = t('free_loot_day5')
  }
  if (id === 6) {
    contentText.value = t('free_loot_day6')
  }

  isShow.value = true
}

const firstRechargeInfo: any = ref({
  process: [1, 0, 0, 0, 0, 0]
})

const close = () => {
  model.value = false
}

//领取奖励-6日
const getAward = (_item: any, flag: boolean) => {
  if (!flag) return false
  const req = NetPacket.req_first_recharge_start();
  req.taskID = 1
  PKwebsocket.instance.send(req, true, {
    callbackName: 'msg_notify_first_recharge_reward',
    callback: getAwardApi
  })
}


const firstRechargeInfoAPI = () => {
  const reqFirst = NetPacket.req_first_recharge_info();
  PKwebsocket.instance.send(reqFirst, true, {
    callbackName: 'msg_notify_first_recharge_info',
    callback: handleFirstRechargeInfo
  })
}

const handleFirstRechargeInfo = (res: any) => {
  firstRechargeInfo.value = res
}

// 领取奖励接口
const getAwardApi = (_res: any) => {
  showNotify.success(t('promo_page_applySuc'))
  firstRechargeInfoAPI()
}

onBeforeMount(() => {
  firstRechargeInfoAPI()

})


</script>

<style scoped lang="scss">
.firstStorage {
  position: relative;
  width: 100%;
  height: 600px;
  border-radius: 12px;
  background-color: transparent;

  .imgs {
    position: relative;

    .logo {
      z-index: 100;
      width: 235px;
      height: 194px;
      position: absolute;
      top: 68px;
      left: -6px;

      img {
        width: 220px;
        height: 180px;
      }
    }

    .text {
      position: absolute;
      width: 215px;
      height: 32px;
      z-index: 200;
      top: 107px;
      left: 140px;

      img {
        width: 200px;
        height: 32px;
      }
    }
  }

  .content-box {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 146px;
    left: 12px;
    width: 347px;
    height: 338px;
    background: url("/imgs/myDiscounts/firstStoragebgc.webp") no-repeat center;
    background-size: 100%;

    .title {
      position: absolute;
      text-align: center;
      top: 17px;
      right: 10px;
      width: 207px;
      height: 26px;
      padding-left: 6px;
      line-height: 26px;
      border-radius: 40px;
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: 400;
      color: #fff;
      background-color: rgba(255, 255, 255, 0.26);
    }

    .content {
      width: 328px;
      height: 268px;
      margin-top: 56px;
      position: relative;
      z-index: 500;
      background-color: transparent;

      .signIn {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        .day {
          width: 104px;
          height: 130px;
          overflow: hidden;
          border-radius: 16px;
          background: linear-gradient(180deg, #FFFFFF 0%, #FFE6A3 100%);

          .now_get {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 32px;
            padding: 0 6px;
            color: #fff;
            //cursor: pointer;
            background: linear-gradient(91.03deg, #FFA451 0.29%, #FF6B18 99.39%);

            p {
              margin: 0 auto;
            }

            .question {
              width: 16px;
              height: 16px;
              flex-grow: 0;
            }
          }

          .day_content {
            display: flex;
            height: calc(100% - 32px);
            align-items: center;
            flex-direction: column;

            .information {
              width: 100%;
              height: 100%;
              padding: 0 4px 5px;
              background-image: url('/imgs/myDiscounts/firstDeposit_purse.webp');
              background-repeat: no-repeat;
              background-position: center 0;
              background-size: 96px 96px;

              >div {
                position: relative;
                display: flex;
                height: calc(100% - 24px);
                align-items: center;
                //padding-top: 1px;
                justify-content: space-between;

                .percent {
                  width: 42px;
                  height: 20px;
                  line-height: 22px;
                  text-align: center;
                  border-radius: 20px;
                  font-size: 14px;
                  color: rgba(255, 111, 29, 1);
                  border: 1px solid rgba(255, 111, 29, 1);

                }

                .gift {
                  width: 31px;
                  height: 36px;
                  margin-top: 20px;
                  z-index: 2;
                }

                .water_money {
                  position: absolute;
                  top: 5px;
                  right: 3px;
                  z-index: 20;

                  :deep(.nut-circle-progress__text) {
                    width: 28px;
                    height: 28px;
                    margin-left: 2px;

                    >div {
                      //display: flex;
                      //align-items: center;
                      //justify-content: center;
                      font-size: 10px;
                      text-align: center;
                      font-weight: 700;
                      color: #ffffff;

                      line-height: 28px;
                      border-radius: 100%;
                      background: radial-gradient(121.98% 100% at 50% 0%, #3EF345 0%, #22B627 68.01%, #3EF345 97%);
                    }
                  }

                }
              }

              .weal {
                width: 100%;
                height: 24px;
                line-height: 24px;
                font-size: 14px;
                font-weight: 400;
                border-radius: 20px;
                background: linear-gradient(180deg, #F7DC82 0%, #CA8528 100%);
              }

              .weal-bg {
                background-color: #FFB327 !important;
              }

              :deep(.nut-button) {
                opacity: 1;
                background: linear-gradient(180deg, #7F7A94 0.17%, #6A6580 100%) !important;

              }

            }

          }
        }

        .day-bg {
          background: linear-gradient(180deg, #FFFFFF 0%, #C8C4D8 100%) !important;

        }
      }
    }
  }

  .close {
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: 67px;
    left: calc(50% - 15px);

  }

}

.popup_body {
  padding: 50px 15px 20px 15px;

  .info {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    margin-bottom: 50px;
  }

  .nut-input {
    box-shadow: 0px 4px 4px 0px #00000040 inset;
    border-radius: 8px;
    border-bottom: unset;
    display: flex;
    justify-content: center;
    background: #1D1C3C;
    box-shadow: 0.5px 0.5px 1px 0px #333260 inset;

    &:deep(.input-text) {
      text-align: center !important;
    }


  }

}

.submit_btn {
  margin: 38px;
  display: flex;
  justify-content: center;

  .btn {
    width: 307px;
    height: 44px;
    border-radius: 8px;
  }
}




.popup-header {
  width: calc(100vw - 30px);
  height: 42px;
  line-height: 42px;
  display: flex;
  justify-content: center;
  box-shadow: 0px 4px 4px 0px #00000040;
  border-radius: 15px 15px 0px 0px;
  position: relative;
  font-size: 16px;
  color: #FFFFFF;
  font-weight: 500;
  background: radial-gradient(87.04% 93.77% at 50% 13.97%, #4C36B3 0.17%, #3A2786 74.42%, #3C279A 100%);

  .close_icon {
    position: absolute;
    right: 10px;
    top: 14px;
  }
}
</style>
